<div class="comic-reader-container">
  <div class="navigation">
    <div class="goto-page-controls" style="display: flex; align-items: center; margin-right: auto;">
      <input
        type="number"
        [(ngModel)]="goToPageInput"
        [min]="1"
        [max]="pages.length"
        placeholder="Page"
        />
      <button
        (click)="goToPageInput !== null && goToPage(goToPageInput)"
        [disabled]="goToPageInput === null || goToPageInput < 1 || goToPageInput > pages.length">
        Go
      </button>
    </div>

    <div class="page-controls" style="display: flex; align-items: center; justify-content: center; flex-grow: 1;">
      <button class="mr-2" (click)="goToPage(1)" [disabled]="currentPage === 0">&lt;&lt;</button>
      <button (click)="previousPage()" [disabled]="currentPage === 0">&lt;</button>
      <span>
        Page {{ currentPage + 1 }}
        {{ isTwoPageView && imageUrls.length > 1 ? '-' + (currentPage + 2) : '' }} of {{ pages.length }}
      </span>
      <button (click)="nextPage()" [disabled]="currentPage >= pages.length - 1">&gt;</button>
      <button class="ml-2" (click)="goToPage(pages.length)" [disabled]="currentPage >= pages.length - 1">&gt;&gt;</button>
    </div>

    <div class="spread-controls" style="display: flex; align-items: center; margin-left: auto;">
      @if (isTwoPageView) {
        <button (click)="toggleSpreadDirection()" title="Toggle Spread Direction">
          {{ pageSpread === 'ODD' ? '⬅️' : '➡️' }}
        </button>
      }
      <button (click)="toggleView()" title="Toggle View">
        {{ isTwoPageView ? '1️⃣' : '2️⃣' }}
      </button>
    </div>
  </div>

  <div class="image-container" [class.two-page-view]="isTwoPageView">
    @if (!isLoading) {
      @if (pages.length > 0) {
        @for (url of imageUrls; track url) {
          <img [src]="url" alt="Page Image"/>
        }
      } @else {
        <p>No pages available.</p>
      }
    } @else {
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
        <p-progressSpinner></p-progressSpinner>
        <p style="margin-top: 1rem; color: #ccc;">Processing pages... This may take a few seconds on first load. Future loads will be significantly faster.</p>
      </div>
    }
  </div>
</div>
